<template>
    <div>
        <router-link to="/"><van-icon name="arrow-left" size="30" style="flex: 1" /></router-link>
                
        评论
        <div v-for="item in dataComment" :key="item.commentId" class="commentElement">
            <div>
                <span id="">{{ item.user.nickname }}</span>
                <!-- <img :src="item.user.avatarUrl" alt="" srcset="" /> -->
                <van-image
                class="imgstyle"
  round
  width="3.5rem"
  height="3.5rem"
  :src="item.user.avatarUrl"
/>
                <van-icon name="good-job-o" ref="likeIt" class="zan" size="28" @click="ajaxLikeComment(item.commentId)"/>
                <div class="time">{{ item.timeStr }}</div>
            </div>
            <br>
            <p>{{ item.content }}</p>
            <a @click="ajaxFloorComment(item.commentId)" style="display: block;margin-top: 13px;">更多回复&gt;</a>
            <div class="floorComment" v-if="item.commentId == myComment&&flag">
                <!-- {{ ajaxFloorComment(item.commentId) }} -->
                <div class="elefloorComment" v-for="eleFloor in dataFloorComment" :key="eleFloor.id">
                    <span id="">{{ eleFloor.user.nickname }}</span>
                    <!-- <img :src="eleFloor.user.avatarUrl" alt="" srcset="" /> -->
                    <van-image
                class="imgstyle"
  round
  width="2.5rem"
  height="2.5rem"
  :src="eleFloor.user.avatarUrl"
/>
                    <div class="time">{{ eleFloor.timeStr }}</div>
                    <p>{{ eleFloor.content }}</p>
                </div>
            </div>
<div class="line_01"></div>

        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            dataComment: [],
            dataFloorComment: [],
            myComment: '',
            flag: ''
        };
    },
    mounted() {
        this.ajaxComment();
    },
    methods: {
        ajaxComment() {
            let url =
                `http://121.41.51.182:3000/comment/new?type=0&id=${this.$route.params.id}&sortType=2`;
            console.log(this.$route.params.id);
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
                withCredentials: true,
            })
                .then((res) => {
                    this.dataComment = res.data.data.comments;
                    console.log(this.dataComment);
                    // console.log(res);
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
        },
        ajaxFloorComment(CommentId) {
            this.myComment = CommentId;
            let url =
                `http://121.41.51.182:3000/comment/floor?parentCommentId=${CommentId}&id=${this.$route.params.id}&type=0`;
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
                withCredentials: true,
            })
                .then((res) => {
                    this.dataFloorComment = res.data.data.comments;
                    this.flag = !this.flag;
                    console.log(this.dataFloorComment);
                    // console.log(res);
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
        },
        ajaxLikeComment(CommentId) {
            this.myComment = CommentId;
            let url =
                // `http://121.41.51.182:3000/comment/floor?parentCommentId=${CommentId}&id=${this.$route.params.id}&type=0`;
                `http://121.41.51.182:3000/comment/like?id=${this.$route.params.id}&cid=${CommentId}&t=1&type=0`;
                console.log(this);
                console.log(event.target.className += ' active');
                // console.log(event.target.classList);
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
                withCredentials: true,
            })
                .then((res) => {
                    // this.$refs.likeIt.className = 'good-job';
                    // console.log(this.$refs.likeIt);
                    // console.log(res);
                    this.$toast.success('点赞成功');
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
        },
    },
};
</script>

<style scoped>

.line_01{
    padding: 0 10px;
    margin: 20px 0;
    border-top: 0.7px solid #ddd;
}

.zan {
    float: right;
    /* color: red; */
    /* background: #000; */
}
a{
        color: rgba(115, 106, 248, 0.658);
        font-size: small;
}

.elefloorComment {
    padding: 10px;
}
.floorComment {
    background-color: rgba(207, 152, 152, 0.306);
    
}
#time {
    font-size: 15px;
    color: darkgray;
}

.commentElement {
    width: 90%;
    padding: 5px 20px;

}

.imgstyle {
    width: 40px;
    float: left;
}
</style>
